<template>
  <div class="breadcrumbs">
    <router-link to="/"></router-link>
    <template v-for="(part, index) in parts">
      <span v-if="index > 0">/</span>
      <router-link :to="part.to" v-if="part.to">{{ part.text }}</router-link>
      <span v-else>{{ part.text }}</span>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Breadcrumbs',
  computed: {
    parts() {
      let parts = [];
      this.$route.matched.forEach((route, index) => {
        const meta = route.meta.title;
        if (meta) {
          parts.push({ text: meta });
        }
      });
      return parts;
    }
  }
};
</script>

<style scoped>
.breadcrumbs {
  font-family: 'Arial', sans-serif; /* 设置字体族 */
  font-size: 16px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体为粗体 */
  color: #FFFFFF; /* 设置字体颜色 */
  text-decoration: none; /* 无文本装饰 */
}
</style>